<script>
import echarts, { number } from 'echarts'
import BaseChart from '@/components/BaseChart.vue'

export default {
  components: {
    BaseChart,
  },
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
    },
    title: {
      type: String,
    },
  },
  computed: {
    dataList() {
      const topArr = this.data?.slice(0, 9) ?? []
      const dataList = topArr
        .filter(item => item)
        ?.map(it => {
          return {
            value: it?.amount_sum / 10000,
            name: it?.country_name || '其他',
          }
        })
      return dataList
    },
    option() {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            label: {
              show: true,
              fontSize: 11,
              formatter(param) {
                return param.name + ' (' + param.percent + '%)'
              },
            },
            data: this.dataList ?? [],
          },
        ],
      }
    },
  },

  methods: {},
}
</script>

<template>
  <base-chart
    height="100%"
    :title="`观看《${title}》用户分布区域占比`"
    :option="option">
  </base-chart>
</template>

<style lang="scss" scoped></style>
